<template>
  <!-- 默认顶部 -->
  <div
    class="diy-user"
    :style="[
      `padding:${diyItem.style.mt}px  ${diyItem.style.mr}px  ${diyItem.style.mb}px  ${diyItem.style.ml}px `,
    ]"
  >
    <template v-if="diyItem.temp?.value == 1">
      <!-- 一 -->
      <div
        class=">div layout-1"
        :class="[`${diyItem.style.shade == 1 ? 'style-shade' : ''}`]"
        :style="[
          diyItem.style.bg_status == 1
            ? `background-image:url(${diyItem.style.bg_img}), linear-gradient(${diyItem.style.deg}deg, ${diyItem.style.bg} 0%, ${diyItem.style.bg2} 100%)`
            : '',
          `padding:${diyItem.style.pt}px ${diyItem.style.pr}px ${diyItem.style.pb}px ${diyItem.style.pl}px `,
          `border-radius:${diyItem.style.t_radius}px ${diyItem.style.t_radius}px ${diyItem.style.b_radius}px ${diyItem.style.b_radius}px`,
        ]"
      >
        <div class="diy-user-cell">
          <img :src="diyItem.data.default" class="diy-user-avater" />
          <div class="diy-user-name">
            <div>
              <div
                @click="loginClick"
                class="fw te fz-default"
                :style="{ color: diyItem.style.text_color }"
              >
                {{
                  !$utils.checkLogin() ? diyItem.data.login_text : user.nickName
                }}
              </div>
              <div class="diy-member-label" v-if="$utils.checkLogin()">
                <div class="diy-member-label-box">
                  <div class="icon icon-huiyuan"></div>
                  <div class="diy-member-label-text">会员</div>
                </div>
              </div>
            </div>
            <div
              class="fz-small-xx"
              :style="{ color: diyItem.style.desc_color }"
            >
              {{ diyItem.data.login_desc }}
            </div>
          </div>
          <div class="diy-user-tool" :style="[`color:${diyItem.style.color}`]">
            <template v-if="$utils.checkLogin()">
              <div class="icon icon-erweima2"></div>
              <div class="icon icon-shezhi-3" @click="toUserEdit"></div>
            </template>
          </div>
        </div>
        <div class="diy-user-wallet" v-if="diyItem.other.wallet.show == 1">
          <template
            v-for="(items, idx) in diyItem.other.wallet.data"
            :key="idx"
          >
            <div
              class="diy-user-wallet-item"
              :style="[`color:${diyItem.style.color}`]"
            >
              <div class="diy-user-wallet-count">0</div>
              <div class="diy-user-wallet-title">
                {{ items.title }}
              </div>
            </div>
          </template>
        </div>
      </div>
    </template>
    <template v-if="diyItem.temp?.value == 2">
      <!-- 2 -->
      <div class="diy-user-box layout-2">
        <div
          :class="[`${diyItem.style.shade == 1 ? 'style-shade' : ''}`]"
          :style="[
            diyItem.style.bg_status == 1
              ? `background-image:url(${diyItem.style.bg_img}), linear-gradient(${diyItem.style.deg}deg, ${diyItem.style.bg} 0%, ${diyItem.style.bg2} 100%)`
              : '',
            `padding:${diyItem.style.pt}px ${diyItem.style.pr}px 0 ${diyItem.style.pl}px `,
            `border-radius: 0 0 100% 100%/0 0 35px 35px;`,
          ]"
        >
          <div class="diy-user-cell">
            <img :src="diyItem.data.default" class="diy-user-avater" />
            <div class="diy-user-name">
              <div class="flex items-center">
                <div
                  @click="loginClick"
                  class="te fw fz-large"
                  :style="{ color: diyItem.style.text_color }"
                >
                  {{
                    !$utils.checkLogin()
                      ? diyItem.data.login_text
                      : user.nickName
                  }}
                </div>
                <div class="diy-member-label" v-if="$utils.checkLogin()">
                  <div class="diy-member-label-box">
                    <div class="icon icon-huiyuan"></div>
                    <div class="diy-member-label-text">会员</div>
                  </div>
                </div>
              </div>
              <div
                class="fz-small-x"
                :style="{ color: diyItem.style.desc_color }"
              >
                {{ diyItem.data.login_desc }}
              </div>
            </div>
            <div
              class="diy-user-tool"
              :style="[`color:${diyItem.style.color}`]"
            >
              <template v-if="$utils.checkLogin()">
                <div class="icon icon-erweima2"></div>
                <div class="icon icon-shezhi-3" @click="toUserEdit"></div>
              </template>
            </div>
          </div>
        </div>
        <div
          :style="[
            `margin-top: 10px;`,
            `padding:0 ${diyItem.style.pr}px ${diyItem.style.pb}px ${diyItem.style.pl}px `,
          ]"
        >
          <div
            class="diy-user-wallet"
            :class="[`${diyItem.style.shade == 1 ? 'style-shade' : ''}`]"
            v-if="diyItem.other.wallet.show == 1"
            :style="[
              `border-radius:${diyItem.style.t_radius}px ${diyItem.style.t_radius}px ${diyItem.style.b_radius}px ${diyItem.style.b_radius}px`,
            ]"
          >
            <template
              v-for="(items, idx) in diyItem.other.wallet.data"
              :key="idx"
            >
              <div class="diy-user-wallet-item">
                <div class="diy-user-wallet-count">
                  <template v-if="items.name == 'wallet'">{{
                    user?.balance || 0
                  }}</template>
                  <template v-else>0</template>
                </div>
                <div class="diy-user-wallet-title">
                  {{ items.title }}
                </div>
              </div>
            </template>
          </div>
        </div>
      </div>
    </template>
    <template v-if="diyItem.temp?.value == 3">
      <!-- 三 -->
      <div class="diy-user-box layout-3">
        <div
          class="diy-user-box-bg"
          :style="[
            diyItem.style.bg_status == 1
              ? `background-image:url(${diyItem.style.bg_img}), linear-gradient(${diyItem.style.deg}deg, ${diyItem.style.bg} 0%, ${diyItem.style.bg2} 100%)`
              : '',
            `height: calc(100% - 30px - ${diyItem.style.pb}px)`,
          ]"
        ></div>
        <div
          :class="[`${diyItem.style.shade == 1 ? 'style-shade' : ''}`]"
          :style="[
            `padding:${diyItem.style.pt}px ${diyItem.style.pr}px ${diyItem.style.pb}px ${diyItem.style.pl}px `,
          ]"
        >
          <div class="diy-user-box-main">
            <div class="diy-user-cell" :style="[`padding-bottom:90px`]">
              <img :src="diyItem.data.default" class="diy-user-avater" />
              <div class="diy-user-name">
                <div class="flex items-center">
                  <div
                    @click="loginClick"
                    class="te fw fz-default"
                    :style="{ color: diyItem.style.text_color }"
                  >
                    {{
                      !$utils.checkLogin()
                        ? diyItem.data.login_text
                        : user.nickName
                    }}
                  </div>
                  <div class="diy-member-label" v-if="$utils.checkLogin()">
                    <div class="diy-member-label-box">
                      <div class="icon icon-huiyuan"></div>
                      <div class="diy-member-label-text">会员</div>
                    </div>
                  </div>
                </div>
                <div
                  class="fz-small"
                  :style="{ color: diyItem.style.desc_color }"
                >
                  {{ diyItem.data.login_desc }}
                </div>
              </div>
              <div
                class="diy-user-tool"
                :style="[`color:${diyItem.style.color}`]"
              >
                <template v-if="$utils.checkLogin()">
                  <div class="icon icon-erweima2"></div>
                  <div class="icon icon-shezhi-3" @click="toUserEdit"></div>
                </template>
              </div>
            </div>
            <div
              class="diy-user-wallet"
              v-if="diyItem.other.wallet.show == 1"
              :style="[
                `top:66px`,
                `border-radius:${diyItem.style.t_radius}px ${diyItem.style.t_radius}px ${diyItem.style.b_radius}px ${diyItem.style.b_radius}px`,
              ]"
            >
              <template
                v-for="(items, idx) in diyItem.other.wallet.data"
                :key="idx"
              >
                <div class="diy-user-wallet-item">
                  <div class="diy-user-wallet-count">0</div>
                  <div class="diy-user-wallet-title">
                    {{ items.title }}
                  </div>
                </div>
              </template>
            </div>
          </div>
        </div>
      </div>
    </template>
  </div>
</template>
  <script lang="ts">
export default {
  name: "storeDiyUser",
};
</script>
<script  lang="ts" setup >
import {
  ref,
  getCurrentInstance,
  computed,
  StyleValue,
  onMounted,
  watch,
} from "vue";
import { diyUserDataType, UserType } from "@/types";
import { routeRedirectTo } from "@/utils/route";
import { useUser } from "@/store";
import { storeToRefs } from "pinia";

const { user } = storeToRefs(useUser());

const {
  proxy: { $utils },
} = getCurrentInstance() as any;

const props = withDefaults(
  defineProps<{
    diyItem?: diyUserDataType;
    index: number;
  }>(),
  {
    diyItem: () => {
      return {
        style: {
          color: "#000000",
          text_color: "#000000",
          desc_color: "#777777",
          bg_status: 0,
          bg_img: "",
          bg: "#FFFFFF",
          bg2: "#FFFFFF",
          deg: 48,
          shade: 0,
          mt: 0,
          mb: 0,
          ml: 0,
          mr: 0,
          pt: 0,
          pb: 0,
          pl: 0,
          pr: 0,
          t_radius: 0,
          b_radius: 0,
        },
        data: {
          login_text: "授权登录",
          login_desc: "可以体验更多",
          default: "",
        },
        other: {
          wallet: {
            show: 0,
            data: [],
          },
        },
      };
    },
    index: 0,
  }
);

onMounted(() => {});

const loginClick = () => {
  if (!$utils.checkLogin()) {
    routeRedirectTo("/pages/login/index");
  } else {
    toUserEdit();
  }
};

const toUserEdit = () => {
  $utils.routeRedirectTo("/otherpages/user/edit/index");
};

const styles = computed<StyleValue>(() => {
  return [
    props.diyItem.style.bg_status == 1
      ? `background-image:url(${props.diyItem.style.bg_img}), linear-gradient(${props.diyItem.style.deg}deg, ${props.diyItem.style.bg} 0%, ${props.diyItem.style.bg2} 100%)`
      : "",
    `padding:${props.diyItem.style.pt}px ${props.diyItem.style.pr}px ${props.diyItem.style.pb}px ${props.diyItem.style.pl}px `,
    `border-radius:${props.diyItem.style.t_radius}px ${props.diyItem.style.t_radius}px ${props.diyItem.style.b_radius}px ${props.diyItem.style.b_radius}px`,
  ];
});
</script>
  
  
  <style scoped>
.diy-user {
  background-size: 100% 100%;
  /*background-color: #fff;*/
  position: relative;
  z-index: 1;
}
.diy-user-box {
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
  background-color: initial;
}
.diy-user-avater {
  width: 100rpx;
  height: 100rpx;
  border-radius: var(--base-radius-small);
  margin-right: 20rpx;
  border: 4rpx solid rgba(0, 0, 0, 0.2);
}
.diy-user-name {
  width: calc(100% - 120rpx - 140rpx);
  height: 90rpx;
  padding: 5rpx 0;
  line-height: 40rpx;
}
.diy-member-label {
  font-size: var(--base-size-small-xx);
  background: linear-gradient(107deg, #7c7878 0%, #201a18 100%);
  color: #f7c774;
  height: 36rpx;
  border-radius: var(--base-radius-small);
  padding: 0 8rpx;
  display: flex;
  align-items: center;
  margin-left: 10rpx;
}
.diy-member-label-box {
  display: flex;
  align-items: center;
}
.diy-member-label-text {
  white-space: nowrap;
}
.diy-member-label .icon {
  font-size: var(--base-size-small);
  margin-right: 4rpx;
}
.diy-user-tool {
  margin-left: 40rpx;
  display: flex;
  width: 100rpx;
  justify-content: space-between;
  text-align: center;
}
.diy-user-tool .icon {
  font-size: var(--base-size-large-xx);
}

.diy-user-wallet .diy-user-wallet-item {
  position: relative;
  flex: 1;
  text-align: center;
}
.diy-user-wallet .diy-user-wallet-item::after {
  position: absolute;
  content: "";
  height: 40rpx;
  top: calc(50% - 20rpx);
  width: 2rpx;
  right: 0;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 2rpx;
  text-align: center;
}
.diy-user-wallet .diy-user-wallet-item:last-child::after {
  width: 0;
}
.diy-user-wallet-count {
  font-size: var(--base-size-large);
  font-weight: bold;
  margin-bottom: 4rpx;
}
.diy-user-wallet-title {
  margin-top: 10rpx;
}

/* common */
.layout-1 .diy-user-cell,
.layout-2 .diy-user-cell,
.layout-3 .diy-user-cell {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 112rpx;
}
/* 1 */

.layout-1 .diy-user-wallet {
  display: flex;
  justify-content: space-around;
  margin-left: 40rpx;
  margin-right: 40rpx;
  padding-top: 40rpx;
  height: 120rpx;
  align-items: center;
}

/* 2 */
.layout-2 .diy-user-cell {
  padding-bottom: 40rpx;
}
.layout-2 .diy-user-wallet {
  background: #fff;
  display: flex;
  justify-content: space-around;
  height: 120rpx;
  padding: 20rpx 0;
  align-items: center;
}

/* 3 */
.layout-3.diy-user-box {
  position: relative;
}
.layout-3.diy-user-box .diy-user-box-bg {
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center;
  background-color: initial;
  position: absolute;
  width: 100%;
}
.layout-3.diy-user-box .diy-user-box-main {
  position: relative;
}
.layout-3.diy-user-box .diy-user-box-main .diy-user-wallet {
  position: absolute;
  background: #fff;
  height: 120rpx;
  padding: 20rpx 0;
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
</style>